@mixin fadeIn($duration: 0.5s) {
  animation: fadeIn $duration linear;
  @keyframes fadeIn {
      0% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }
}

@mixin fadeInDown($duration: 0.7s) {
  animation: fadeInDown $duration;
  @keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    30% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
  }
}

/**
 * duration 执行过程需要多少秒
 * count 播放次数，infinite为无限循环
 */
@mixin bounceIn($duration: 2s, $count: 1) {
  animation: bounceIn $duration ease $count;
  @keyframes bounceIn {
    from, 45%, 50%, 60%, 70%, 80%, 90%, to {
      animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    45% {
      transform: scale3d(1, 1, 1);
    }
    50% {
      transform: scale3d(.8, .8, .8);
    }

    60% {
      transform: scale3d(1.1, 1.1, 1.1);
    }

    70% {
      transform: scale3d(.9, .9, .9);
    }

    80% {
      transform: scale3d(1.03, 1.03, 1.03);
    }

    90% {
      transform: scale3d(.97, .97, .97);
    }

    to {
      transform: scale3d(1, 1, 1);
    }
  }
}

